<template>
    <div>
        <!--顶部滑动区-->
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                        全部
                    </a>
                    <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html" @click="getone">
                       家居生活
                    </a>
                    <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html" @click="gettwo">
                        风景壁纸
                    </a>
                    <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html" @click="getthree">
                        宠物
                    </a>
                    <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html" @click="getfour">
                        野生风情
                    </a>
                    <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html" @click="getfive">
                        动漫
                    </a>
                </div>
            </div>
        </div>
        <ul class="photo-list">
            <router-link v-for="item in list" :key="item.ID" tag="li" to="/home/photoinfo">
                <img v-lazy="item.img">
                <div class="info">
                    <div class="title">{{item.title}}</div>
                    <div class="body">{{item.content}}</div>
                </div>
            </router-link>    
        </ul>
    </div>
</template>
<script>
import mui from '../../lib/mui/js/mui.min.js'

export default {
   data(){
       return {
           app_key:'9701679D4CFB823670BA30DBEA0AE855',
           list:[]
       };
   },
   created(){
        this.getImageList()
   },
   mounted(){
      mui('.mui-scroll-wrapper').scroll({
	       deceleration: 0.0005 
       });
   },
   methods:{
       getImageList(){

            this.$jsonp(
                'http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=picture&logic=and&where=[["cat", "=", "0"]]&order=1&page=1&perpage=30&app_key='+this.app_key,{}
            ).then(res=>{
                this.list=res.data.list
            })
       },

       getone(){
           this.$jsonp('http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=picture&logic=and&where=[["qid", "=", "1"]]&order=1&page=1&perpage=10&app_key='+this.app_key,{}).
           then(res=>{
                this.list=res.data.list
               
           })
       },
       gettwo(){
           this.$jsonp('http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=picture&logic=and&where=[["qid", "=", "3"]]&order=1&page=1&perpage=10&app_key='+this.app_key,{})
           .then(res=>{
               this.list=res.data.list
               
           })
       },
       getthree(){
           this.$jsonp('http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=picture&logic=and&where=[["qid", "=", "2"]]&order=1&page=1&perpage=10&app_key='+this.app_key,{})
           .then(res=>{
               this.list=res.data.list
           })
       },
       getfour(){
           this.$jsonp('http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=picture&logic=and&where=[["qid", "=", "4"]]&order=1&page=1&perpage=10&app_key='+this.app_key,{})
           .then(res=>{
               this.list=res.data.list
           })
       },
       getfive(){
           this.$jsonp('http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=picture&logic=and&where=[["qid", "=", "5"]]&order=1&page=1&perpage=10&app_key='+this.app_key,{})
           .then(res=>{
               this.list=res.data.list
           })
       }
   }
}
</script>
<style lang="scss" scoped>
* {
	touch-action: pan-y;
  }

.photo-list{
    list-style: none;
    margin: 0;
    padding:10px;
    padding-bottom: 0;
    li{
        background-color: #ccc;
        text-align: center;
        margin-bottom: 10px; 
        box-shadow:0 0 9px #ccc;
        position: relative;
        img[lazy=loading]{
            width: 40px;
            height: 300px;
            margin: auto;
        }
        img{
            width: 100%;
            height: 380px;
            vertical-align: middle;
            
        }

        .info{
            color: white;
            text-align: left;
            position: absolute;
            bottom: 0;
            padding: 0 5px;
            background-color:rgba(0,0,0,0.4);
            max-height: 84px;
            .title{
                font-size: 14px;
            }
            .body{
                font-size: 13px;
            }
        }
    }
}
</style>
